<template>
  <div class="password">
    <header-nav :leftArrow="true" titelText="修改密码"></header-nav>

    <div class="content">
      <van-form @submit="onSubmit">
        <div class="formLabel" style="padding-top: 20px">旧密码</div>
        <div class="pwd">
          <van-field v-model="upForm.password" :type="passType" name="旧密码" clearable placeholder="请输入旧密码"
            :rules="[{ required: true, message: '请填写旧密码' }]" />
          <img class="my-eye-img" v-if="passType == 'password'" src="../../assets/images/closeEyes.png" alt=""
            @click="switchPasswordType" />
          <img class="my-eye-img" v-if="passType == 'text'" src="../../assets/images/openEyes.png" alt=""
            @click="switchPasswordType" />
        </div>
        <div class="formLabel">新密码</div>
        <div class="pwd">
          <van-field v-model="upForm.newPwd" name="新密码" :type="passType2" clearable placeholder="请输入字母/数字/字符组成的6-16位密码"
            :rules="[{ required: true, message: '请填写新密码' }]" />
          <img class="my-eye-img" v-if="passType2 == 'password'" src="../../assets/images/closeEyes.png" alt=""
            @click="switchPasswordType2" />
          <img class="my-eye-img" v-if="passType2 == 'text'" src="../../assets/images/openEyes.png" alt=""
            @click="switchPasswordType2" />
        </div>
        <div class="formLabel">确认新密码</div>
        <div class="pwd">
          <van-field v-model="upForm.repeatPwd" name="密码" :type="passType3" clearable placeholder="请输入字母/数字/字符组成的6-16位密码"
            :rules="[{ required: true, message: '请确认密码' }]" />
          <img class="my-eye-img" v-if="passType3 == 'password'" src="../../assets/images/closeEyes.png" alt=""
            @click="switchPasswordType3" />
          <img class="my-eye-img" v-if="passType3 == 'text'" src="../../assets/images/openEyes.png" alt=""
            @click="switchPasswordType3" />
        </div>
        <div style="padding: 0 16px">
          <van-button block type="primary" native-type="submit" style="height: 47px; letter-spacing: 5px">
            确定
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script setup>
import md5 from 'js-md5'
import { showSuccessToast, showFailToast, showNotify } from 'vant'
const router = useRouter()
const { useLogin } = $globalStore
const upForm = reactive({
  password: '',
  newPwd: '',
  repeatPwd: '',
})

const oldPassword = ref(localStorage.getItem('userPwd'))

const onSubmit = async (values) => {
  console.log('submit', values)
  if (upForm.password != oldPassword.value) {
    return showNotify({ type: 'danger', message: '旧密码错误' })
  } else if (
    !/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/.test(upForm.newPwd)
  ) {
    return showNotify({ type: 'danger', message: '新密码格式不正确' })
  } else if (upForm.newPwd != upForm.repeatPwd) {
    return showNotify({ type: 'danger', message: '新密码不一致' })
  }
  let params = {
    password: md5(upForm.password),
    newPwd: md5(upForm.newPwd),
    repeatPwd: md5(upForm.repeatPwd),
  }
  const res = await useLogin.updatePwd(params)
  if (res.code == 0) {
    showSuccessToast({ message: '修改成功，请重新登录' })
    router.push({ name: 'App' })
  } else {
    showFailToast(res.message)
  }
}

const passType = ref('password')
const switchPasswordType = () => {
  if (passType.value == 'password') {
    passType.value = 'text'
  } else {
    passType.value = 'password'
  }
}

const passType2 = ref('password')
const switchPasswordType2 = () => {
  if (passType2.value == 'password') {
    passType2.value = 'text'
  } else {
    passType2.value = 'password'
  }
}

const passType3 = ref('password')
const switchPasswordType3 = () => {
  if (passType3.value == 'password') {
    passType3.value = 'text'
  } else {
    passType3.value = 'password'
  }
}
</script>
<style lang="scss" scoped>
.password {
  width: 100%;
  height: 100%;
  overflow-y: hidden;

  .content {
    width: 100%;
    height: 100%;
    margin-top: 46px;
  }
}

.formLabel {
  padding-left: 16px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 24px;
  color: rgba(0, 0, 0, 1);
}

.pwd {
  display: flex;
  margin: 4px 16px 24px 0;
  align-items: center;

  >img {
    width: 20px;
    height: 20px;
  }
}

.password .van-cell:after {
  left: 16px !important;
}

.my-eye-img {
  position: absolute;
  right: 20px;
}
</style>
